<template>
  <div class="Menu">
    <div class="left">
      <img src="../assets/img/logo.png" alt="">
    </div>
    <div class="middle">
      <span 
        v-for="(item, index) in menuList" 
        :key="index"
        class="menuItem"
        @click="routerPush(item.name)"
        :class="$route.meta.primaryMenuName == item.name?'active':''"
        >
        <i class="icon" :class="`icon${index+1}`"></i>
        <span>{{ item.label }}</span>
      </span>

    </div>
    <div class="right" >
      <a-popover placement="bottomRight">
        <template #content>
          <p @click="LogOut" style="cursor: pointer;">退出登录</p>
        </template>
        <a-avatar :src="avatar" />
      </a-popover>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Menu',
  props: {
  },
  data() {
    return {
      avatar: require('@/assets/img/Avatar.png'),
      menuList: [
        {
          name: 'Home',
          label: '首页',
        },
        {
          name: 'CourseLearn',
          label: '课程学习',
        },
        {
          name: 'InstructionalDesign',
          label: '教学设计',
        },
      ]
    }
  },
  methods: {
    routerPush(e, n) {
      this.activate = n;
      this.$router.push({
        name: e,
      });
    },

    LogOut() {
      this.$confirm({
        title: () => '是否确认退出系统',
        type: "warning",
        cancelText: '取消',
        okText: '确认',
        onOk: () => {
          localStorage.clear();
          this.$message.success("退出成功");
          this.$router.push({
            name: "Login"
          });
        },
        onCancel() {},
      });
      
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.Menu {
  display: flex;
  justify-content: center;
  background: rgba(255, 255, 255, 0.49);

  .left {
    border-right: 1px solid rgba(255, 218, 218, 1);
    padding: 0 20px;
    background: #fff;
    box-sizing: border-box;
    img {
      width: 159px;
    }
  }

  .middle {
    color: rgba(0, 0, 0, .6);
    font-weight: 600;
    margin-left: 30px;
    display: flex;
    align-items: center;

    span + span {
      margin-left: 10px;
    }
    .menuItem {
      padding: 5px 8px;
      line-height: 32px;
      height: 32px;
      cursor: pointer;
      display: flex;
      align-items: center;
    }

    .icon {
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }

    .icon1 {
      background: url('../assets/img/menu1_1.png') 0 0 no-repeat;
      background-size: 100%;
    }
    .icon2 {
      background: url('../assets/img/menu2_1.png') 0 0 no-repeat;
      background-size: 100%;
    }
    .icon3 {
      background: url('../assets/img/menu3_1.png') 0 0 no-repeat;
      background-size: 100%;
    }
  }

  .active {
    color: rgba(154, 0, 0, 1);
    background: rgba(255, 0, 0, 0.1);
    border-radius: 3px;
  }
}

.left,
.right {
  flex: 0 0 100px;
  /* Flexible width of 100px, not growing or shrinking */
  text-align: center;
}

.middle {
  flex: 1;
  /* Takes up remaining space, allowing it to be centered */
  // text-align: center;
}
</style>
